<template>
  <!-- <v-touch v-on:swipeup="swiperup"> -->
  <div class="goods">
    <div class="aside" ref="aside">
      <ul>
        <li
          v-for="(item, index) in $store.state.getDataAbout.data.goods"
          :key="index"
          @click="showlist(index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="lists" ref="lists">
      <div
        :id="index"
        class="list"
        v-for="(item, index) of $store.state.getDataAbout.data.goods"
        :key="index"
      >
        <div class="title">{{ item.name }}</div>
        <ul>
          <li v-for="(i, ind) of item.foods" :key="ind">
            <div class="imgbox" @click="toGood(index, ind, i)">
              <img :src="i.image" alt="" />
            </div>
            <div class="foodinfo">
              <div class="name" @click="toGood(index, ind, i)">{{ i.name }}</div>
              <div class="number" @click="toGood(index, ind, i)">
                月售{{ i.sellCount }}份 好评率{{ i.rating }}%
              </div>
              <div>
                <div class="price" @click="toGood(index, ind, i)">￥{{ i.price }}</div>
                <div class="addOrRemove">
                  <i
                    class="el-icon-remove"
                    v-show="i.num > 0"
                    @click="sub(index, ind, i)"
                  ></i>
                  <span v-show="i.num !== 0">{{ i.num }}</span>
                  <i
                    class="el-icon-circle-plus"
                    @click="add(index, ind, i)"
                  ></i>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <Footer></Footer>
  </div>

  <!-- </v-touch> -->
</template>

<script>
import Footer from "../components/Footer.vue";
export default {
  name: "Goods",
  components: { Footer },
  data() {
    return {
      nums: {},
      foodsData: {},
    };
  },
  methods: {
    showlist(target) {
      document.getElementById(target).scrollIntoView();
    },
    toGood(index, ind, i) {
      this.$bus.$emit("routingPop", {index, ind, i});
    },
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if(scrollTop > 160){
        this.$refs.aside.className="aside scrollAside"
        this.$refs.lists.className="lists scrollLists"
      }
      if(scrollTop <= 160){
        this.$refs.aside.className="aside"
        this.$refs.lists.className="lists"
      }
      
    },
    add(index, ind, i) {

      this.$store.commit("getDataAbout/addOne", { index, ind });
      this.$store.commit("priceAbout/addCart", { index, ind, i });
    },
    sub(index, ind, i) {
      this.$store.commit("getDataAbout/subOne", { index, ind });
      this.$store.commit("priceAbout/subCart", { index, ind, i });
    },
  },
  mounted() {
    // this.foodsData = this.goods
  },
  activated() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  beforeRouteLeave(to,from,next){
    window.removeEventListener("scroll", this.scrollToTop);
    next()
   }

};
</script>

<style scoped>
.goods {
  display: flex;
  flex-direction: row;
  font-size: 0.8em;
  box-sizing: border-box;
  padding-bottom: 40px;
  /* position: relative; */
}
.aside {
  /* height: 100vh; */
  /* position: absolute; */
  /* position: fixed; */
  /* top: 0; */
  width: 18%;
  background: rgb(235, 235, 235);
}
.aside li {
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0px 6px;
  border-bottom: 1px solid rgb(226, 226, 226);
}

.lists {
  padding: 5px 2px;
  width: 82%;
  background: #fff;
}
.lists .list .title {
  font-size: 10px;
  color: #999;
  width: 100%;
  border-left: 2px solid #aaa;
  padding-left: 15px;
  margin-bottom: 10px;
  height: 20px;
  line-height: 20px;
}
.lists .list li {
  padding-left: 15px;
  height: 70px;
  margin-top: 15px;
  border-bottom: 1px solid rgb(221, 221, 221);
  display: flex;
}
.lists .list li .imgbox {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.lists .list li div:nth-child(3) {
  display: flex;
}
.foodinfo .name {
  font-weight: 600;
  font-size: 13px;
}
.foodinfo .number {
  color: #888;
  font-size: 12px;
}
.foodinfo .price {
  color: red;
  font-size: 14px;
}
.addOrRemove {
  font-size: 18px;
  color: rgb(77, 146, 211);
  position: absolute;
  right: 25px;
}
.addOrRemove span {
  color: #888;
  font-size: 12px;
  padding: 10px;
}
.imgbox img {
  width: 100%;
  height: 100%;
}
.scrollAside {
  position: fixed;
  top: 0;
  height: 100vh;
}
.scrollLists{
  padding-left: 18.5%;
  width: 100%;
}
</style>